<%@ page import="com.deepai.dprsmgr.utils.ErrCode" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="sp" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8" %>
<%@include file="../base_path.jsp" %>

<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-cache"/>
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="description" content="">

    <link rel="stylesheet" type="text/css" href="<%=basePath%>/lib/bootstrap/3.3.7/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" media="screen"
          href="<%=basePath%>/lib/jqgrid/5.2.1/css/ui.jqgrid-bootstrap.css"/>
    <link rel="stylesheet" type="text/css" media="screen" href="<%=basePath%>/lib/lobibox/css/lobibox.min.css"/>
    <link type="text/css" rel="stylesheet" href="<%=basePath%>/lib/bootstrap-select/css/bootstrap-select.min.css"/>
    <link rel="stylesheet" type="text/css" media="screen" href="<%=basePath%>/css/mycss.css"/>
    <style type="text/css">
        .header-right {
            position: absolute;
            right: 0px;
            top: 0px;
            bottom: inherit;
        }

        .col-xs-2 {
            width: 11%;
        }

        #form_filter .control-label {
            float: left;
        }
    </style>
    <title>任务详细</title>

</head>
<body>
<div class="navbar-fixed-top">
    <div class="breadcrumb">
        <span>呼入中心</span>/
        <span>数据报表</span>/
        <%--<span><a href="<%=basePath%>/task/showTaskManager.do">任务管理</a></span>/--%>
        <span class="active">人工报表</span>
        <span class="pull-right" title="刷新">
           <div class="btn-refresh" onclick="location.replace(location.href);">
           	<img src="<%=basePath%>/images/refresh.png" >
           </div>
        </span>

    </div>
</div>

<div class="container-fluid" style="margin-top: 40px;">
    <div class="container-fluid-main">
        <div class="page-header">
            <h3>
                人工报表</h3>

        </div>

        <div class="panel-group" id="accordion">
            <div class="panel panel-default panel-default-sample">
                <div class="panel-body">
                    <form class="form-horizontal" role="form" id="form_filter">

                        <div class="col-xs-2">
                            <input type="text" class="form-control input-sm Wdate" id="begin_date" autocomplete="off"
                                   disableautocomplete  placeholder="开始时间"
                                   onclick="var end_date=$dp.$('end_date');WdatePicker({isShowClear:false,
                                   onpicked:function(dq){var myobj=isCleanEndDate(dq.cal.getNewDateStr(),end_date.value);
                                   if(!myobj.ispass){end_date.value=myobj.maxDay;}},
                                       errDealMode:1,dateFmt: 'yyyy-MM-dd', maxDate:'%y-%M-%d'})">
                        </div>
                        <label class="control-label" style="padding-left: 0;">至</label>
                        <div class="col-xs-2">
                            <input type="text" class="form-control input-sm Wdate" id="end_date" autocomplete="off"
                                   disableautocomplete  placeholder="结束时间"
                                   onclick="var begin_date=$dp.$('begin_date');var begin_datestr=begin_date.value;if(isEmpty(begin_datestr)){
                                        bootbox.alert('请先选择开始日期');return false;}
                                       WdatePicker({isShowClear:false,errDealMode:1,dateFmt: 'yyyy-MM-dd',
                                       minDate:'#F{$dp.$D(\'begin_date\')}', maxDate:'#F{getMaxDay($dp.$D(\'begin_date\'))}'})">
                        </div>




                        <div class="col-xs-2">
                            <input type="text" class="form-control input-sm" id="txt_value"
                                   name="txt_value"
                                   placeholder="请输入坐席分机号">
                        </div>
                        <div class="col-xs-2">
                            <button class="btn btn-primary btn-sm" id="btn_query" type="button">查询</button>
                        </div>

                        <div class="col-xs-2" style="float: right">
                            <button class="btn btn-primary btn-sm" id="btn_export" type="button">导出</button>
                        </div>

                    </form>
                </div>
            </div>
        </div>

        <table id="callInInfoJQGrid"></table>
        <div style="height: 40px" id="callInInfoJQGridPager"></div>
    </div>
</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width:1200px;">
        <div class="modal-content" style="width:1200px;">

        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="<%=basePath%>/lib/jquery/1.11.0/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/bootstrap/3.3.7/js/bootstrap.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/bootbox/bootbox.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/jqgrid/5.2.1/js/i18n/grid.locale-cn.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/jqgrid/5.2.1/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/lobibox/js/lobibox.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/lobibox/js/messageboxes.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/lobibox/js/notifications.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/bootstrap-select/js/bootstrap-select.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/wavesurfer.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/wavesurfer.regions.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/common.js"></script>
<!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript">
    var arr_dialog_info, call_info, curRowData;
    var waveSurfer;
    var lastCallId, nextCallId, call_id
    var $table = "#callInInfoJQGrid";
    $(function () {
        $("#begin_date").val(getLastMonth());
        $("#end_date").val(getToday());
        $('#select_business').selectpicker();

        var createNotify = null;
        $.jgrid.defaults.responsive = true;
        $.jgrid.defaults.styleUI = "Bootstrap";
        var $callInInfoJQGrid = $("#callInInfoJQGrid").jqGrid({
            height: 434,
            autowidth:true,
            autoScroll: false,
            width:'100%',
            shrinkToFit: true, /*  autoScroll: false, *//*forceFit: true, */
            colNames: ["坐席分机", "所属队列", "进线量", "接听量", "未接听量", "接听率",
                "总通话时长(s)", "平均通话时长(s)"],
            colModel: [
                {name: "id", index: "id",width: "100%", key: true, hidden: false},
                {name: "queueName", index: "queueName",width: "100%",autowidth: true, align: "left"},
                // {name: "seatNumberCount", index: "seatNumberCount",width:"100%", autowidth: true,align: "left"},
                {name: "incomingLine", index: "incomingLine", align: "left",width: "100%", },
                {name: "listening", index: "call_time",width: "100%", align: "left", },
                {name: "noListening", index: "noListening",width: "100%", align: "left", },
                {name: "listeningRate", index: "listeningRate", width: "100%",autowidth: true, align: "left"},
                {name: "billsec", index: "billsec", autowidth: true, align: "left"},
                {name: "avgBillsec", index: "avgBillsec",autowidth: true, align: "left"},
            ],
            pager: "#callInInfoJQGridPager",
            viewrecords: true,
            sortable: true,
            sortname: 'duration',
            hidegrid: false,
            multiselect: false,
            url: "<%=basePath%>/ivrReportForms/ivrSeatList.do",
            postData: getJQGridFilterData(),
            datatype: 'json',
            rownumbers: true,
            rownumWidth: 100,
            rowNum: 30,
            rowList: [15, 30, 50],
            jsonReader: {
                root: "dataList", page: "currPage", total: "totalPages",          //   很重要 定义了 后台分页参数的名字。
                records: "totalCount", repeatitems: false, id: "call_id"
            },
            loadComplete: function (data) {
                // 自动调整高度
                var resCount = data.records;
                var tableHeight = resCount * 30 + 40;
                $("#gbox_callInInfoJQGrid .ui-jqgrid-bdiv").css(
                    "cssText",
                    "height: " + tableHeight + "px!important;");
            },
            gridComplete: function () {         // 数据加载完成后 添加 采购按钮
                $("#callInInfoJQGrid").jqGrid('setLabel', 'rn', '序号', {'text-align': 'center', 'font-size': '12px'}, '');

            },
            beforeSelectRow: function (rowid, e) {
                // var $myGrid = $(this),
                //     i = $.jgrid.getCellIndex($(e.target).closest('td')[0]),
                //     cm = $myGrid.jqGrid('getGridParam', 'colModel');
                // return (cm[i].name != 'opt');
            },
            onSelectRow: function (rowid) {

            },
            ondblClickRow: function (id) {
                <%--$("#modalCallInfo").modal({--%>
                <%--remote: '<%=basePath %>/call/callInfoShow.do?reserve_id=' + id--%>
                <%--});--%>
//                if (id && id !== lastSel) {
//                    jQuery('#blacklistJQGrid').jqGrid('restoreRow', lastSel);
//                    jQuery('#blacklistJQGrid').jqGrid('editRow', id, true);
//                    lastSel = id;
//                }
            }

        });


        // 导出excel
        $("#btn_export").click(function () {
            var data = $("#callInInfoJQGrid").jqGrid('getRowData');
            if (data.length == 0) {
                myNotify("warning", "", "暂无数据可导出！");
            } else {
                window.location.href = "<%=basePath%>/ivrReportForms/downLoadIvrSeatListExcel.do?"+
                    "&startTime=" + getJQGridFilterData().startTime + "&endTime=" + getJQGridFilterData().endTime
                    + "&id=" + getJQGridFilterData().id;
            }
        });


        $("#btn_query").click(function () {
            refreshJQGrid();
        });
    });

    /******************************方法声明**********************************/
    /**
     * 刷新表格数据
     */
    function refreshJQGrid() {
        $("#callInInfoJQGrid").jqGrid("setGridParam", {
            url: "<%=basePath%>/ivrReportForms/ivrSeatList.do",
            mtype: 'POST',
            datatype: "json",
            postData: getJQGridFilterData(),
            page: 1
        }).trigger("reloadGrid");
    }

    // 获取筛选数据
    function getJQGridFilterData() {
        var postData = {};
        postData.id= $('#txt_value').val();
        //开始时间
        postData.startTime = $('#begin_date').val();
        //结束时间
        postData.endTime = $('#end_date').val();
        return postData;
    }
    // 导出单个数据
    function exportSingleData(call_id) {
        window.location.href = "<%=basePath%>/dialog/exportSingleAudioData.do?call_id=" + call_id;
    }




</script>
</body>
</html>